<template>
    <!-- visactor/vtable -->
    <div id="tableContainer" :style="`width:${props.width};height: ${props.height}`"></div>
</template>

<script setup lang="ts">
import * as VTable from '@visactor/vtable';
import { InputEditor } from '@visactor/vtable-editors';

onMounted(() => {
    // 初始化配置
    const option = {
        records: records.value,
        columns: columns.value,
        widthMode: widthMode.value,
    };

    // 实例化表格
    const instance = new VTable.ListTable(document.getElementById('tableContainer') as HTMLElement, option);
    // 自定义编辑器
    const inputEditor = new InputEditor();
    // 注册编辑器
    VTable.register.editor('deliveryQuantity-editor', inputEditor);
    VTable.register.editor('unit-editor', inputEditor);
    VTable.register.editor('remark-editor', inputEditor);
    // 监听单元格数据修改事件 -- 如果一个表格里面有重复的产品需要额外处理
    instance.on('change_cell_value', (args) => {
        // 当编辑行为deliveryQuantity时，触发
        if (args.col == 5) {
            // 编辑单元格数据
            emits(
                'change_cell_value',
                instance.records[args.row - 1].orderId,
                instance.records[args.row - 1].productId,
                args.changedValue,
                args.rawValue,
                args.row - 1
            );
        }
    });
    // 暴露实例
    tableInstance.value = instance;
});

/* ******************************父组件需要传递的属性/方法****************************** */
// Model 声明
// 表格数据
const records = defineModel<{ [key: string]: any }[]>('records', { required: true, default: () => [] });
// 表格列配置
const columns = defineModel<{ field: any; title: any; width: any }[]>('columns', { required: true, default: () => [] });
// 表格列宽度的计算模式
const widthMode = defineModel<'standard' | 'adaptive' | 'autoWidth'>('widthMode', { required: false, default: 'standard' });
// 表格实例
const tableInstance = defineModel<VTable.ListTable>('tableInstance', { required: false, default: () => null });

// Props 声明
const props = defineProps({
    // 表格宽度 -- 默认为 屏幕宽度 - 左侧导航栏宽度 + 内容区域左右内边距
    width: { type: String, required: false, default: 'cacl(100vw - 240px)' },
    // 表格高度 -- 默认为 屏幕高度 - 导航栏高度 + 内容区域上下内边距
    height: { type: String, required: false, default: 'calc(100vh - 100px)' },
});

// Emits 声明
const emits = defineEmits<{
    (e: 'change_cell_value', orderId: string, productId: string, changedValue: number | string, rawValue: number | string, editIndex: number): void;
}>();
</script>

<style></style>
